import React, { Component } from 'react';
import '../styles/SortCity.scss'
import { IndexBar, List } from 'antd-mobile'
import * as service from '../api/index'
import { NavBar, Toast } from 'antd-mobile'

class SortCity extends Component {


    constructor(props) {
        super(props)
        this.state = {
            groups: []
        }
    }
    async componentDidMount() {
        var res = await service.sortCity()
        console.log(res.data);
        this.setState({ groups: res.data })

    }
    changecity(item) {
        console.log(item.name);
        localStorage.setItem('cityname', item.name)
        this.props.history.goBack()
    }
    back() {
        this.props.history.goBack()
    }
    render() {

        return (
            <div className='sortcity' >
                <div className="header">
                    <div className="top">
                        <NavBar onBack={() => { this.back() }}>城市选择</NavBar>
                    </div>
                </div>
                <div style={{ height: window.innerHeight }}>
                    <IndexBar>
                        {this.state.groups.map((group) => {
                            const { letter, data } = group
                            return (
                                <IndexBar.Panel
                                    index={letter}
                                    title={`${letter}`}
                                    key={`标题${letter}`}
                                    brief={`${(letter).toUpperCase()}`}
                                >
                                    <List>
                                        {data.map((item, index) => (
                                            <List.Item key={index} onClick={() => { this.changecity(item) }} >{item.name}</List.Item>
                                        ))}
                                    </List>
                                </IndexBar.Panel>
                            )
                        })}
                    </IndexBar>
                </div>
            </div>
        );
    }
}

export default SortCity;